<div class="content-margin">
    <div class="flex-window stretch">
        <div class="flex-window-head">
            <div class="flex-horizontal flex-shrink-0 margin-bottom margin-bottom-sm">
                <div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-bind="click: newItem, requiredAccess: 'DatabaseReadWrite'">
                            <i class="icon-plus"></i>
                            <span>Add new item</span>
                        </button>
                    </div>
                    <div class="btn-group-label" data-bind="css: { active: selectedItemsCount }, requiredAccess: 'DatabaseReadWrite'" data-label="Selection"
                         role="group">
                        <button type="button" class="btn btn-danger"
                                data-bind="click: deleteSelected, css: { 'btn-spinner': spinners.delete() }, enable: deleteEnabled">
                            <span class="icon-trash"></span> <span>Delete</span>
                        </button>
                    </div>
                </div>
                <div>
                    <input class="form-control" placeholder="Filter keys that start with..." data-bind="textInput: filter" />
                </div>
                <div class="flex-separator"></div>
                <small title="Go to the Compare Exchange documentation">
                    <a target="_blank" data-bind="attr: { href: 'https://ravendb.net/l/2BGJN2/' + clientVersion() }"><i class="icon-link"></i>Compare Exchange tutorial</a>
                </small>
            </div>
        </div>
        <div class="flex-window-scroll margin-top">
            <div class="scroll-stretch">
                <div class="panel">
                    <virtual-grid class="resizable js-cmp-xchg-grid"
                                  params="controller: gridController, emptyTemplate: 'empty-cmp-xchg-template'"></virtual-grid>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="empty-cmp-xchg-template">
    <div class="text-center text-muted">
        <i class="icon-lg icon-empty-set"></i>
        <h2 class="margin-top margin-top-sm" data-bind="text: $root.filter() ? 'No matching items' : 'No Compare Exchange items defined'"></h2>
    </div>
</script>

<div class="tooltip json-preview js-cmp-xchg-tooltip" style="opacity: 0">
    <pre><code></code></pre>
</div>
